<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>IDE HappyOJ - Online Judge</title>
    <meta http-equiv="keywords" content="ACM,OJ,OnlineJudge,JAVA,C/C++,GO,JS,LUA,Python,Ruby,Rust,HappyOJ,IDE,在线判题系统,在线IDE">
    <meta http-equiv="description" content="IDE of Online Judge System">
    <link rel="stylesheet" href="css/styles.css" >
    <script src="js/jquery-1.7.2.js"></script>
    <script src="js/gdoj.js"></script>
</head>
<style>
    .headerNav{min-width:1024px;width:96%!important;}
    .headerNav ul.hright{margin-right:0px;!important;}
    .container {width:100%!important;}
    body, html {margin:0!important; height:100%!important; overflow-x:hidden!important;overflow-y:hidden!important}
    #problem-box-left{float:left;width:0px!important;display: none;:hidden!important}
    #problem-box-right{float:right;width:100%!important}
    #problem-drag-bar{display: none!important}
    #test-box {display:inline}
</style>
<body>
    <div th:replace="common::web-navbar"></div>
    <div id="problem-box">
        <div id="problem-box-left" >
            <div id="problem-box-nav" class="problem-second-nav">
                <ul class="hleft">
                    <li id="problem-box-nav-content" class="nav_menu current">
                    </li>
                    <li id="problem-box-nav-status" class="nav_menu">
                    </li>
                </ul>
                <ul class="hright">
                    <li class="nav_menu"> </li>
                </ul>
            </div>
            <div id="problem-content" class="problem-content small-scrollbar">
                <div id="problem-status" class="problem-status"></div>
                <div id="problem-information" class="problem-information"></div>
            </div>
            <div id="bottom-bar-left">
                <div class="bottom_button"></div>
            </div>
        </div>
        <div id="problem-drag-bar"></div>
        <div id="problem-box-right">
            <div id="ide-box-nav" class="ide-second-nav">
                <div class="ide-box-nav-left">
                    <input type="hidden" id="username" name="username" th:value="${session.session_username}"/>
                    <input type="hidden" id="contestId" name="contestId" value="0"/>
                    <input type="hidden" id="problemId" name="problemId"  value="0">
                    <select class="lang-choice" id="select_lang" name="language" th:if="${languages==null}">
                        <option value="1" >MS C++</option>
                        <option value="2" >MS C</option>
                        <option value="3" >GNU C++</option>
                        <option value="4" >GNU C</option>
                        <option value="5" >Java</option>
                        <option value="8" >Pascal</option>
                    </select>
                    <select class="lang-choice" id="select_lang" name="language" th:if="${languages!=null}">
                        <option th:each="language,stat : ${languages}"
                                th:value="${language.id}"
                                th:text="${language.language_name}">
                    </select>
                </div>
                <div class="ide-box-nav-right">
                    <span class="ide-menu-item load-default-template" th:title="#{ide.reset_default_code_template}">
                        <img class="ide-menu-img" src="/img/default_code.png" />
                    </span>
                    <span class="ide-menu-item ide-setting " th:title="#{ide.setting}">
                        <img class="ide-menu-img" src="/img/ide_setting.png" />
                    </span>
                </div>
            </div>
            <div id="ide-box" class="ide-box">
                <div id="source" class="source-box"></div>
                <div id="test-box">
                    <div id="test-box-nav">
                        <div id="test-nav-tab-input" class="test-box-nav-tab test-box-nav-tab-cur">[[#{problem.testbox.input}]]</div>
                        <div id="test-nav-tab-output" class="test-box-nav-tab">[[#{problem.testbox.output}]]</div>
                    </div>
                    <table class="test-box-tb">
                        <tr id="test-box-tb-input" >
                            <td><textarea id="input" class="test-box-input small-scrollbar" name="input" rows="10"></textarea></td>
                        </tr>
                        <tr id="test-box-tb-output" style="display:none">
                            <td>
                                <span id="output-status" class="test-box-output-status" th:text="#{problem.testbox.running_code}"></span><br>
                                <textarea id="output" class="test-box-output small-scrollbar" name="output" rows="10" readonly="readonly"></textarea>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div id="bottom-bar-right">
                <div id="consoleMenu" class="console-menu">[[#{problem.console}]]<span id="consoleCaert" class="caret-down"></span></div>
                <div class="bottom_button">
                    <input id="runsolution" class="run-solution button_submit" type="submit" th:value="#{submit.run}"/>
                </div>
            </div>
        </div>
    </div>
    <div th:include="ide-setting"></div>
    <script th:src="@{/js/monaco-editor/min/vs/loader.js}"></script>
    <script type="text/javascript" th:src="@{/js/submit.js}"></script>
</body>
</html>
